<template>
	<view class="SpikeRecordBox">
		<view class="SpikeRecordBox_header">
			<view @click="backReturn" class="SpikeRecordBox_header_back">
				<image src="../../../static/home/back_White.png" mode="widthFix"></image>
			</view>
			<view class="SpikeRecordBox_header_inputbox">
				<u-search v-model="val" :focus="true" placeholder="搜索" bgColor="rgba(255,255,255,0.7)"
					:showAction="false" class="search_box_top_input" :clearabled="true"></u-search>
			</view>
		</view>
		<view class="SpikeRecordBox_content">
			<view class="SpikeRecordBox_content_tabs">
				<view @click="switchTab(1)" :class="tabFun(1)" class="SpikeRecordBox_content_tabs_list">
					秒杀记录
				</view>
				<view @click="switchTab(2)" :class="tabFun(2)" class="SpikeRecordBox_content_tabs_list">
					预约记录
				</view>
				<view @click="switchTab(3)" :class="tabFun(3)" class="SpikeRecordBox_content_tabs_list">
					转让记录
				</view>
				<view @click="switchTab(4)" :class="tabFun(4)" class="SpikeRecordBox_content_tabs_list">
					收款记录
				</view>
			</view>
			<view class="SpikeRecordBox_content_component">
				<SpikeRecord v-if="tabNum == 1"></SpikeRecord>
				<AppointmentRecord v-if="tabNum == 2"></AppointmentRecord>
				<TransferRecord v-if="tabNum == 3"></TransferRecord>
				<ReceivePayment v-if="tabNum == 4"></ReceivePayment>
			</view>
		</view>
	</view>
</template>

<script>
	import SpikeRecord from './component/SpikeRecord.vue'
	import AppointmentRecord from './component/AppointmentRecord.vue'
	import TransferRecord from './component/TransferRecord.vue'
	import ReceivePayment from './component/ReceivePayment.vue'
	export default {
		components: {
			SpikeRecord,
			AppointmentRecord,
			TransferRecord,
			ReceivePayment
		},
		data() {
			return {
				val: '',
				tabNum: 1
			}
		},
		onLoad(data) {
			console.log(data)
		},
		methods: {
			backReturn() {
				uni.navigateBack({});
			},
			tabFun(type) {
				if (this.tabNum == type) {
					return 'SpikeRecordBox_content_tabs_list_active'
				} else {
					return ''
				}
			},
			switchTab(type) {
				this.tabNum = type
			}

		}
	}
</script>

<style lang="scss" scoped>
	.SpikeRecordBox {
		.SpikeRecordBox_header {
			background-image: linear-gradient(to right, #FE3D47, #FC773D);
			padding: 10upx;
			padding-top: calc(10upx + var(--status-bar-height));
			display: flex;
			align-items: center;

			.SpikeRecordBox_header_back {
				padding: 0 32upx;

				image {
					width: 18upx;
				}
			}

			.SpikeRecordBox_header_inputbox {
				width: calc(100% - 32upx - 18upx - 86upx);
			}
		}

		.search_box_top_input {
			/deep/ .uni-input-placeholder {
				background-color: transparent !important;
			}

			/deep/ .u-search__content__input {
				background-color: transparent !important;
			}
		}

		.SpikeRecordBox_content {
			padding: 0 32upx;

			.SpikeRecordBox_content_tabs {
				display: flex;
				align-items: flex-end;
				margin-top: 26upx;
				justify-content: space-between;

				.SpikeRecordBox_content_tabs_list {
					font-size: 28upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.5);
					line-height: 40upx;
				}

				.SpikeRecordBox_content_tabs_list_active {
					transform: scale(1.2);
					transform-origin: bottom center;
					color: rgba(0, 0, 0, 0.9);
				}
			}

			.SpikeRecordBox_content_component {
				margin-top: 20upx;
				height: calc(100vh - 20upx - 84upx - 66upx);
				overflow-x: hidden;
			}
		}

	}
</style>
<style>
	page {
		background-color: #E5E7E9;
	}
</style>
